const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const { VueLoaderPlugin } = require('vue-loader');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports={
    entry:'./src/main.js',
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: 'javascirpt/[name].[hash].js',
    },
    module:{
        rules:[{
            test: /\.vue$/,
            loader: 'vue-loader',
        },{
            test:/\.css$/,
            loader:['style-loader','css-loader']
        },{
            test:/\.(jpg|gif|png|svg)$/,
            use:[{
                loader:'url-loader',
                options:{
                    limit:1024,
                    name:'[name]-[hash].[ext]',
                    outputPath:"images"
                }
            }]
        },
        {
            test:/\.(woff|woff2|eot|ttf|otf|svg)$/,
            use:[{
                loader:'url-loader',
                options:{
                    limit:1024,
                    name:'[name]-[hash].[ext]',
                    outputPath:"static"
                }
            }]
        },{ //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass! 
            test: /\.scss$/,
            loaders: ["style-loader", "css-loader", "sass-loader"]
        }]
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js',
            '@':path.resolve(__dirname,'./src')
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title:'xiasd',
            template:'./src/index.html',
            filename:'./index.html'
        }),
        new CleanWebpackPlugin(['dist']),//清除不需要的文件
    ],
    devServer: {
        contentBase: './src'
    }
 }